<template>
 
  <div class="bg4"></div>
  <section class="bg2">
    <div class="bg3">
      <div class="box1">
        <el-select placeholder="选择类型" class="xuanzeliexing">
        <el-option label="途选大床房" value="0" />
        <el-option label="途享大床房" value="1" />
        <el-option label="途奢大床房" value="2" />
        <el-option label="途奢双床房" value="3" />
        <el-option label="途享家庭房" value="4" />
      </el-select>
      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker
          class="rili"
          v-model="value2"
          type="month"
          placeholder="选择月"
        />
      </div>
      </div>
      
      <div class="bg5">
        <table class="biaoge">
            <thead>
                <tr>
                    <th>周日</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                </tr>
            </thead>
                <tbody id="empTbody">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>16</td>
                        <td>17</td>
                        <td>18</td>
                        <td>19</td>
                        <td>20</td>
                        <td class="box2" @click="onAdd">
                            <div>21(今天)</div>
                            <div>￥304.00</div>
                            <div>剩余11间/售0间</div>
                        </td>
                    </tr>
                    <tr>
                        <td class="box3" @click="onAdd">
                          <div>22</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td class="box3" @click="onAdd">
                          <div>23</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td class="box3" @click="onAdd">
                          <div>24</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td class="box3" @click="onAdd">
                          <div>25</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td class="box3" @click="onAdd">
                          <div>26</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td class="box3" @click="onAdd">
                          <div>27</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td class="box3" @click="onAdd">
                          <div>28</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                    </tr>
                    <tr>
                        <td class="box3" @click="onAdd">
                          <div>29</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td class="box3" @click="onAdd">
                          <div>30</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td class="box3" @click="onAdd">
                          <div>31</div>
                          <div>￥304.00</div>
                          <div>剩余11间/售0间</div>
                        </td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                </tbody>
        </table>
    </div>
    <el-dialog v-model="addVisible" title="调整房态/房量">
      <div>房态设置：
        <el-checkbox v-model="checked2" >维持不变</el-checkbox>
        <el-checkbox v-model="checked1" >设置关房</el-checkbox>
        <el-checkbox v-model="checked3">设置开房</el-checkbox>
      </div>
      <el-form-item label="重复" :label-width="formLabelWidth">
                <el-select v-model="addData.type" placeholder="选择类型">
                    <el-option label="当天" value="0" />
                    <el-option label="每天" value="1" />
                </el-select>
            </el-form-item>
        <el-form :model="addData">
            <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="addData.jiage" autocomplete="off" />
            </el-form-item>
            <el-form-item label="剩余房量" :label-width="formLabelWidth">
                <el-input v-model="addData.shengyu" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="add">修改</el-button>
            </span>
        </template>
    </el-dialog>
    </div>
  </section>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const checked1 = ref(false)
const checked3 = ref(false)
const checked2 = ref(true)
const value2 = ref("");
const addVisible=ref(false);
const formLabelWidth=ref(80);
const onAdd = () => {
    addVisible.value=true;
}
const add = () => {
    addVisible.value=false;
    console.log('添加')

}
const addData=({
    type:'0',
    jiage:'',
    shengyu:''
})
</script>
<style lang="less" scoped>
.bg {
  width: 100%;
  height: 50px;
}

.bg2 {
  background-color: rgb(242, 242, 242);
  width: 100%;
  height: 800px;
}
.bg3 {
  width: 95%;
  height: 700px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
}
.box1{
  display: flex;
}
.bg4 {
  width: 100%;
  height: 20px;
  background-color: rgb(242, 242, 242);
}
.bg5{
  width:96%;
  height: 680px;
  background-color: rgb(255, 255, 255);
}
.xuanzeliexing {
  margin: 20px;
}
.block {
  margin: 20px;
}
.biaoge{
    width: 96%;
    border-collapse: collapse;
    margin-left: 23px;
    margin-top: 10px;
}
.biaoge tr th,
.biaoge tr td{
    border: 1px solid rgb(227, 224, 224);
    text-align: center;
    width: 90px;
    height: 100px;
    color: rgb(101, 97, 97);
}
.biaoge tr th{
    background-color:rgb(246, 250, 254);
}
.biaoge tr:nth-child(odd){
    background-color:rgb(244, 244, 244); 
}
.box2{
  background-color: rgb(39, 136, 252);
}
.box2>div{
  color: white;
}

.box3:hover{
  background-color:  rgb(39, 136, 252);
  color: white;
}
</style>
